import React, { useMemo } from 'react';
import styled from 'styled-components';

import useTokenBalance from '../../../hooks/useTokenBalance';
import { getDisplayBalance } from '../../../utils/formatBalance';

import { useWallet } from 'use-wallet';

import useModal from '../../../hooks/useModal';

import Label from '../../Label';

import AccountModal from './AccountModal';
import TokenSymbol from '../../TokenSymbol';
import useBasisCash from '../../../hooks/useBasisCash';

interface WalletItemProps {
  name: string;
}

const WalletItem: React.FC<WalletItemProps> = ({name}) => {
  const basisCash = useBasisCash();
  const balance = useTokenBalance(basisCash.externalTokens[name]);
  const displayBalance = useMemo(() => getDisplayBalance(balance, basisCash.externalTokens[name].decimal), [balance]);
    console.log(balance,basisCash.externalTokens[name].decimal)
  return (
    <StyledBalanceWrapper>
      <TokenSymbol symbol={name} />
      <StyledBalance>
        <StyledValue>{displayBalance}</StyledValue>
        <Label text={name} />
      </StyledBalance>
    </StyledBalanceWrapper>
  )
}

const StyledValue = styled.div`
  color: ${props => props.theme.color.grey[300]};
  font-size: 30px;
  @media (max-width: 768px) {
    font-size: 15px;
    font-weight: 500;
  }
  font-weight: 700;
`

const StyledBalance = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
`

const StyledBalanceWrapper = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 ${props => props.theme.spacing[3]}px;
  @media (max-width: 768px) {
    margin: 0 3px;
  }
`

export default WalletItem
